<template>
    <!-- 页面主体 -->
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="服务商品详情" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="share-fill" size="22" @click="goShare"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="coreshop-full-screen-banner-swiper-box">
            <u--image width="100%" height="375px" :src="info.thumbnail"></u--image>
        </view>

        <view class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
            <view class="coreshop-flex coreshop-justify-between coreshop-align-center">
                <view class="coreshop-text-red coreshop-font-weight-bold">
                    <text class="coreshop-font-16">¥</text>
                    <text class="coreshop-font-24">{{ info.money || '0.00' }}</text>
                </view>
                <view class="coreshop-flex-sub coreshop-flex coreshop-text-left coreshop-justify-end coreshop-align-center">
                    <view class="coreshop-text-right coreshop-time-right" v-if="info.openStatus == 1 && info.timestamp > 0">
                        <u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
                            <view class="time">
                                <view class="coreshop-font-12">仅剩：</view>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.days }}</text>
                                </view>
                                <text class="time__doc">天</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.minutes }}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.seconds }}</text>
                                </view>
                            </view>
                        </u-count-down>
                    </view>
                    <view class="coreshop-text-right coreshop-time-right" v-if="info.openStatus == 2 && info.timestamp > 0">
                        <u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
                            <view class="time">
                                <view class="coreshop-font-12">即将开始：</view>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.days }}</text>
                                </view>
                                <text class="time__doc">天</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.minutes }}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ timeData.seconds }}</text>
                                </view>
                            </view>
                        </u-count-down>
                    </view>
                    <view class="coreshop-font-12" v-if="info.openStatus == 3">已结束</view>
                </view>
            </view>
            <view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
                <text class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ info.title || '' }}</text>
            </view>
            <view class="coreshop-margin-top-8 coreshop-multiple-line-clamp">
                <text class="coreshop-font-14 coreshop-text-gray">{{ info.description || '' }}</text>
            </view>
            <view class="coreshop-margin-top-16 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
                <view class="coreshop-font-12">
                    <text>已售：</text>
                    <text class="font-color-orange">{{ goodsInfo.buyCount || '0' }}</text>
                </view>
                <view class="coreshop-font-12">
                    <text>单包量：</text>
                    <text>{{  info.ticketNumber }}</text>
                </view>
                <view class="coreshop-font-12">
                    <text>剩余：</text>
                    <text>{{info.amount || '0'}}</text>
                </view>
            </view>
        </view>

        <view class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
            <!--服务-->
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row" v-if="info.allowedMemberships.length>0">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">会员级别</text>
                </view>
                <view class="coreshop-basis-8 coreshop-flex coreshop-align-center">
                    <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
                        <view class="coreshop-margin-left-10" v-for="(item, indexChild) in info.allowedMemberships" :key="indexChild">
                            <u-tag :text="item" :plain="true" mode="light" size="mini" />
                        </view>
                    </view>
                </view>
            </view>
            <!--发货-->
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="info.consumableStores.length>0" />
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10" v-if="info.consumableStores.length>0">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务网点</text>
                </view>
                <view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
                    <u-icon name="checkmark-circle" size="14" labelSize="12" color="#e54d42" :label="item" v-for="(item, index) in info.consumableStores" :key="index" class="coreshop-margin-right-10"></u-icon>
                </view>
            </view>
            <!--规格-->
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
            <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10">
                <view class="coreshop-basis-2">
                    <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">有效期</text>
                </view>
                <view class="coreshop-basis-8 coreshop-flex coreshop-align-center coreshop-font-12">
                    {{info.startTime}} 至 {{info.endTime}}
                </view>
            </view>
        </view>

        <!--参数-->
        <view class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
            <!--内容区-->
            <view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
                <view class="line-70"></view>
                <view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
                <view class="line-70"></view>
            </view>
            <view class="coreshop-margin-top-10 coreshop-bg-white">
                <u-parse :content="info.contentBody" :selectable="true" v-if="info.contentBody"></u-parse>
                <!-- 无数据时默认显示 -->
                <view class="coreshop-emptybox coreshop-padding-10" v-else>
                    <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
                </view>
            </view>
        </view>

        <!--常见问题-->
        <view class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
            <view class="coreshop-margin-bottom-16">
                <text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
            </view>
            <view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row" v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
                <view class="coreshop-basis-2 coreshop-font-13">
                    {{item.title}}
                </view>
                <view class="coreshop-basis-8">
                    <view class="coreshop-font-12">{{item.description}}</view>
                </view>
            </view>
            <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
            <view class="coreshop-text-center coreshop-text-blue  coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
        </view>

        <!--为您推荐-->
        <view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
            <view class="line-70"></view>
            <view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
            <view class="line-70"></view>
        </view>


        <view class="waterfall " v-if="shopRecommendData.length > 0">
            <uv-waterfall ref="waterfall"
                          v-model="shopRecommendData"
                          :add-time="10"
                          :left-gap="leftGap"
                          :right-gap="rightGap"
                          :column-gap="columnGap"
                          @changeList="changeList">
                <!-- 第一列数据 -->
                <template v-slot:list1>
                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
                    <view>
                        <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                            <view class="coreshop-margin-bottom-10">
                                <view class="waterfall-item__image" :style="[imageStyle(item)]">
                                    <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                </view>
                                <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
                                    <view class="coreshop-title-294 coreshop-multiple-line-clamp">
                                        <text class="coreshop-font-14">{{item.name}}</text>
                                    </view>
                                    <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
                                        <view class="coreshop-text-red coreshop-font-weight-bold">
                                            <text class="coreshop-font-12">¥</text>
                                            <text class="coreshop-font-16">{{item.price}}</text>
                                            <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
                                        </view>
                                        <view>
                                            <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                        <view>
                                            {{ pointShowName}}兑换价:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                        <view>
                                            购买赠送:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{item.points}}{{ pointShowName}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <!-- 第二列数据 -->
                <template v-slot:list2>
                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
                    <view>
                        <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                            <view class="coreshop-margin-bottom-10">
                                <view class="waterfall-item__image" :style="[imageStyle(item)]">
                                    <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                </view>
                                <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
                                    <view class="coreshop-title-294 coreshop-multiple-line-clamp">
                                        <text class="coreshop-font-14">{{item.name}}</text>
                                    </view>
                                    <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
                                        <view class="coreshop-text-red coreshop-font-weight-bold">
                                            <text class="coreshop-font-12">¥</text>
                                            <text class="coreshop-font-16">{{item.price}}</text>
                                            <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
                                        </view>
                                        <view>
                                            <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                        <view>
                                            {{ pointShowName}}兑换价:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                        <view>
                                            购买赠送:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{item.points}}{{ pointShowName}}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
            </uv-waterfall>
        </view>

        <!-- 分享弹窗 -->
        <view class="coreshop-padding-0">
            <u-popup mode="bottom" :show="shareBox" ref="share">
                <!-- #ifdef MP-WEIXIN -->
                <coreshop-share-wx :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id" :shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description" :shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
                <coreshop-share-app :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id" :shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description" :shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
                <!-- #endif -->
            </u-popup>
            <div id="qrCode" ref="qrCodeDiv"></div>
        </view>

        <!--占位底部距离-->
        <view class="coreshop-tabbar-height" />
        <!--底部操作-->
        <view class="coreshop-good-footer-fixed">
            <view class="tabbar">
                <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
                    <!-- 客服按钮 -->
                    <!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
                    <view class="action" @click="showChat()">
                        <button class="noButtonStyle">
                            <u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
                        </button>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="action">
                        <button open-type="contact" bindcontact="showChat" class="noButtonStyle" :send-message-title="goodsInfo.name" :send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id" :send-message-img="goodsInfo.image" show-message-card="true">
                            <u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
                        </button>
                    </view>
                    <!-- #endif -->
                </view>
                <view class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-4">
                    <u-button type="success" size="normal" @click="toAddOrder" :disabled="disabled">立刻购买</u-button>
                </view>
            </view>
        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                id: 0,
                info: {},
                orderType: this.$globalConstVars.paymentType.serviceOrder,	// 订单类型
                shopRecommendData: [], // 其他数据
                timeData: {},
                shareUrl: this.$globalConstVars.shareUrl,
                shareBox: false,
                serviceDescription: {
                    commonQuestion: [],
                    delivery: [],
                    service: [],
                },
                disabled: false,
                list1: [],// 瀑布流第一列数据
                list2: [],// 瀑布流第二列数据
                leftGap: 10,
                rightGap: 10,
                columnGap: 10
            }
        },
        onLoad(e) {
            this.id = e.id;
            //获取服务商品数据
            this.getDetail();
            //获取推荐商品数据
            this.getGoodsRecommendList();
            //获取服务说明
            this.getServiceDescription();
        },
        computed: {
            ...mapState({
                hasLogin: state => state.hasLogin,
                userInfo: state => state.userInfo,
            }),
            hasLogin: {
                get() {
                    return this.$store.state.hasLogin;
                },
                set(val) {
                    this.$store.commit('hasLogin', val);
                }
            },
            userInfo: {
                get() {
                    return this.$store.state.userInfo;
                },
                set(val) {
                    this.$store.commit('userInfo', val);
                }
            },
            pointSwitch() { return this.$store.state.config.pointSwitch },
            pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
            pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
            pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
            pointShowName() { return this.$store.state.config.pointShowName },
            pointGetModel() { return this.$store.state.config.pointGetModel },
            pointShowPoint() { return this.$store.state.config.pointShowPoint },
            imageStyle(item) {
                return item => {
                    const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
                    const w = v / 2;
                    const rate = w / item.w;
                    const h = rate * item.h;
                    return {
                        width: w + 'px',
                        height: h + 'px'
                    }
                }
            }
        },
        methods: {
            // 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
            changeList(e) {
                this[e.name].push(e.value);
            },
            onChange(e) {
                this.timeData = e
            },
            onFinish(e) {
                if (this.info.openStatus == 2) {
                    this.info.openStatus == 1
                    this.disabled = false;
                } else if (this.info.openStatus == 1) {
                    this.info.openStatus == 3
                    this.disabled = true;
                }
            },
            getDetail() {
                let data = {
                    id: this.id
                };
                this.$u.api.getServiceDetail(data).then(res => {
                    if (res.status) {
                        this.info = res.data;
                        if (res.data.openStatus == 3) {
                            this.disabled = true;
                        } else if (res.data.openStatus == 2) {
                            this.disabled = true;
                        }
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 获取推荐商品信息
            getGoodsRecommendList() {
                let _this = this;
                let data = {
                    id: 10
                }
                _this.$u.api.getGoodsRecommendList(data).then(res => {
                    if (res.status) {
                        _this.shopRecommendData = _this.$u.randomArray(res.data);
                    } else {
                        _this.$u.toast(res.msg)
                    }
                });
            },
            //获取服务项
            getServiceDescription() {
                let _this = this;
                this.$u.api.getServiceDescription().then(res => {
                    if (res.status == true) {
                        _this.serviceDescription.commonQuestion = res.data.commonQuestion;
                        _this.serviceDescription.delivery = res.data.delivery;
                        _this.serviceDescription.service = res.data.service;

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            },
            toAddOrder() {
                //创建一个服务订单并跳转到支付
                let data = {
                    id: this.id
                };
                this.$u.api.addServiceOrder(data).then(res => {
                    if (res.status) {
                        this.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + this.orderType + '&serviceId=' + this.id)
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 跳转到h5分享页面
            goShare() {
                this.shareBox = true;
            },
            closeShare() {
                this.shareBox = false;
            },
            //获取分享URL
            getShareUrl() {
                let data = {
                    client: this.$globalConstVars.shareClient.wxMiNiProgram,
                    url: this.$globalConstVars.shareUrl,
                    type: this.$globalConstVars.shareModel.url,
                    page: this.$globalConstVars.shareType.serviceGoods,
                    params: {
                        serviceGoodsId: this.info.id,
                    }
                };
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    data.token = userToken
                }
                this.$u.api.share(data).then(res => {
                    this.shareUrl = res.data
                });
            },
        },
        watch: {
            info: {
                handler() {
                    this.getShareUrl();
                },
                deep: true
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.info.title,
                imageUrl: this.info.thumbnail,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.info.title,
                imageUrl: this.info.thumbnail,
                path: this.shareUrl
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "details.scss";
</style>